<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDeletes"
        >删除</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="modelList"  class="scroll-right">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="模型" align="center" prop="model" />
      <el-table-column label="备注" align="center" :show-overflow-tooltip="true" prop="desc" />
      <el-table-column label="创建时间"  align="center" :formatter="dateFormat" prop="createTime" :show-overflow-tooltip="true" />
      <el-table-column label="是否当前"  align="center" prop="status" :show-overflow-tooltip="true">
        <template slot-scope="scope">

            <el-tag
            :key="scope.row.status"
            :type="status[scope.row.status].type"
            effect="dark">
            {{status[scope.row.status].label}}
          </el-tag>
              
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status != 1"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="setCurrent(scope.row)"
          >设为当前</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateDesc(scope.row)"
          >编辑描述</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加/修改描述信息 -->
    <el-dialog
      :title="updateDescData.title"
      :visible.sync="updateDescData.show"
      :before-close="cancelUpdateDescData"
      append-to-body
      width="30%"
    >
      <el-form ref="updateDescData" :rules="updateDescDataRules"  :model="updateDescData" label-width="80px">
        <el-form-item label="描述" prop="updateDescData">
          <el-input v-model="updateDescData.desc" type="textarea" placeholder="请输入描述信息"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdateDescData">取 消</el-button>
        <el-button  type="primary" :icon="updateDescIcon" :disabled="updateDescDisabled" @click="submitDesc">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {list, set_current, delModel, updateModelDesc} from "@/api/ai_train/model";

export default {
  name: "Model",
  dicts: ['sys_job_group', 'sys_job_status', 'is_merge', 'merge_type'],
  data() {
    return {
      updateDescIcon: "",
      updateDescDisabled: false,
      updateDescData:{
        title: "描述",
        show: false,
        desc: "",
        id: null
      },
      showSearch: false,
      // 总条数
      total: 0,
      // 定时任务表格数据
      modelList: [],
      queryParams: {
        "id": "",
        "checkPoint": "",
        "pageNum": 1,
        "pageSize": 10
      },
      status:{
        "1": {
          "label": "当前",
          "type": "success"
        },
        "0": {
          "label": "历史",
          "type": "warning"
        }
      },
      // 描述信息规则
      updateDescDataRules:{
        desc: [
            { required: true, message: "描述信息不能为空", trigger: "blur" }
          ]
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 提交描述
    submitDesc(){
        this.$refs["updateDescData"].validate(valid => {
        if(valid){
            this.updateDescIcon = "el-icon-loading";
            this.updateDescDisabled = true;

              updateModelDesc(this.updateDescData).then(
                      res =>{
                        this.updateDescIcon = "";
                        this.updateDescDisabled = false;
                        this.$modal.msgSuccess("修改成功");
                        this.getList();
                        this.cancelUpdateDescData();
                      }
              ).catch(res=>{
                this.updateDescIcon = "";
                this.updateDescDisabled = false;
              });
        }
      });
    },

    // 编辑描述
    handleUpdateDesc(data){
      this.updateDescData.show = true;
      if(data.desc){
        this.updateDescData.desc =  data.desc;
      }else{
        this.updateDescData.desc = "";
      }
      this.updateDescData.id = data.id;
    },

    
    // 取消添加描述信息
    cancelUpdateDescData(){
      this.updateDescData = {
        title: "描述",
        show: false,
        desc: ""
      };
    },

    /** 查询定时任务列表 */
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {
        this.modelList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    dateFormat(row, column, cellValue, index){
      if(cellValue){
       const updateDate =  new Date(cellValue);
       let year = updateDate.getFullYear();
       let month = updateDate.getMonth() + 1;
       if(month<10){
        month = "0"+month;
       }
       let day = updateDate.getDate();
       if(day<10){
        day = "0"+day;
       }
       let hours = updateDate.getHours();
       if(hours<10){
        hours = "0"+hours;
       }
       let min = updateDate.getMinutes();
       if(min<10){
        min = "0"+min;
       }
       let sec = updateDate.getSeconds();
       if(sec<10){
        sec = "0"+sec;
       }
       return year+"-"+month+"-"+day+" "+hours+":"+min+":"+sec;
      }
    },
    handleDelete(row){
        this.$modal.confirm('是否确认删除？').then(() =>{


          const data = {"id": row.id};
          delModel(data).then(res=>{
              this.$modal.msgSuccess("删除成功");
              this.getList();
          });

          
        }).catch(() => {});
    },
    setCurrent(row){
        const data = {"id": row.id};
        set_current(data).then(res => {
            this.getList();
        });
    }
   
  }
};
</script>
<style>
.scroll-right{
  height: calc(100vh - 240px) !important;
  width: 100%;
  overflow: auto;
}
.el-radio__original[aria-hidden="true"] {
  display: none !important;
}
</style>